import React, { useState } from 'react';
import { type ReactNode } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { RouterChildrenList } from '../routers'
import type { MenuProps } from 'antd';
import { Breadcrumb, Button, Layout, Menu, theme } from 'antd';
import LuanguageSwitch from '../Components/LuanguageSwitch'
import { useTranslation } from 'react-i18next'
import ChangeTheme from '../Components/ChangeTheme'
const { Header, Content, Footer, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];
interface RouterChildrenListType {
	path: string;
	title: string;
	element: ReactNode;  // Change to ReactNode
	icon?: ReactNode;
	children?: RouterChildrenListType[] | null   // Change to ReactNode
}
function getItem(
	label: React.ReactNode,
	key: React.Key,
	icon?: React.ReactNode,
	children?: MenuItem[],
): MenuItem {
	return {
		key,
		icon,
		children,
		label,
	} as MenuItem;
}
const App: React.FC = () => {
	const [collapsed, setCollapsed] = useState(false);
	const { t } = useTranslation()
	const {
		token: { colorBgContainer, borderRadiusLG },
	} = theme.useToken();
	const randerLayout = (arr: RouterChildrenListType[]) => {
		let newArr: any[] = []
		arr.forEach((item) => {
			if (item.children) {
				newArr.push(
					getItem(
						<NavLink to={item.path}>{t(`menu.${item.path}`)}</NavLink>, item.title, item.icon, randerLayout(item.children)
					)
				)
			} else {
				newArr.push(
					getItem(
						<NavLink to={item.path}>{t(`menu.${item.path}`)}</NavLink>, item.title, item.icon,
					)
				)
			}
		})
		return newArr
	}
	const items = randerLayout(RouterChildrenList)
	return (
		<Layout style={{
			minHeight: '100vh', background: 'var(--bg-color)',
			borderColor: 'var(--border-color)'
		}}>
			<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} style={{
				background: 'var(--bg-color)',
				borderColor: 'var(--border-color)'
			}}>
				<div className="demo-logo-vertical" style={{
					background: 'var(--bg-color)',
					borderColor: 'var(--border-color)'
				}}>
					<h1 style={{
						textAlign: 'center', background: 'var(--bg-color)',
						borderColor: 'var(--border-color)'
					}}>{t('system.title')}</h1>
				</div>
				<Menu style={{
					background: 'var(--bg-color)',
					borderColor: 'var(--border-color)'
				}} defaultSelectedKeys={['1']} mode="inline" items={items} />
			</Sider>
			<Layout style={{
				background: 'var(--bg-color)',
				borderColor: 'var(--border-color)'
			}}>
				<Header style={{ padding: 0, background: colorBgContainer }} >
					<div className='header'>
						<LuanguageSwitch />
						<ChangeTheme />
						<div className='userinfo'>
							<div>用户名:{localStorage.getItem('username')}</div>
							<div>{localStorage.getItem('tole') === '1' ? '管理员' : '普通用户'}</div>
						</div>
						<Button>退出登录</Button>
					</div>
				</Header>
				<Content style={{
					margin: '0 16px',
					background: 'var(--bg-color)',
					borderColor: 'var(--border-color)'
				}}>
					<Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
					<div
						style={{
							padding: 24,
							minHeight: 660,
							background: colorBgContainer,
							borderRadius: borderRadiusLG,
						}}
					>
						<Outlet />
					</div>
				</Content>
				<Footer style={{ textAlign: 'center' }}>
					Ant Design ©{new Date().getFullYear()} Created by Ant UED
				</Footer>
			</Layout>
		</Layout>
	);
};
export default App;

